<template>

  <h1>基础用法</h1>
  <el-upload
      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"

  >
    <el-button type="primary">点击上传</el-button>
  </el-upload>



  <h1>默认显示文件</h1>
  <el-upload
      :file-list="fileList"
      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
  >
    <el-button type="primary">点击上传</el-button>
  </el-upload>

  <h1>显示文字提示</h1>
  <el-upload
      :file-list="fileList"
      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
  >
    <el-button type="primary">点击上传</el-button>
    <template #tip>
      <div class="el-upload__tip">
        这里是上传文件的地方
      </div>
    </template>
  </el-upload>

  <h1>支持多选文件</h1>
  <el-upload
      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
      multiple
  >
    <el-button type="primary">点击上传</el-button>
  </el-upload>


  <h1>采用拖拽上传</h1>
  <el-upload
      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
      drag
  >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  </el-upload>

  <h1>上传时附带额外参数</h1>
  <el-upload
      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
      :data="information"
  >
    <el-button type="primary">点击上传</el-button>
  </el-upload>

<h1>设置上传的文件名</h1>
  <el-upload
      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
      name="file"
  >
    <el-button type="primary">点击上传</el-button>
  </el-upload>

<h1>不展示已经上传的文件列表</h1>
  <el-upload
      :file-list="fileList2"
      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
      :show-file-list="false"
  >
    <el-button type="primary">点击上传</el-button>

  </el-upload>

  <h1>接受上传的文件类型</h1>
  <el-upload
      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
      :accept="accept"
  >
    <el-button type="primary">点击上传</el-button>
  </el-upload>



  <h1>钩子</h1>
  <el-upload
      :file-list="fileList"
      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :on-error="handleError"
      :on-progress="handleProgress"
  >
    <el-button type="primary">点击上传</el-button>
  </el-upload>


  <h1>方法</h1>
  <el-upload
      ref="uploads"
      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
      :file-list="fileList"
  >
    <el-button type="primary">点击上传</el-button>
  </el-upload>
  <el-button @click="clearFiles">点击</el-button>


</template>

<script setup>
import { ref } from 'vue'

const information = {
  // 每次上传时候不光上传文件,还附带上传额外参数token
  token: '123456'
}
const accept = ref(".txt, .html, .png")


const fileList = ref([
  {
    name: 'element-plus-logo.svg',
    url: 'https://element-plus.org/images/element-plus-logo.svg',
  },
  {
    name: 'element-plus-logo2.svg',
    url: 'https://element-plus.org/images/element-plus-logo.svg',
  }
])

const handlePreview = (UploadFile)=> {
  console.log("点击文件列表中已上传的文件时的钩子" + UploadFile.name)
}

const handleRemove = (UploadFile,uploadFiles)=> {
  console.log("文件列表移除文件时的钩子" + UploadFile.name + ",文件数" +uploadFiles.length)
}

const handleSuccess = (UploadFile,uploadFiles)=> {
  console.log("文件上传成功时的钩子" + UploadFile.name + "文件数" +uploadFiles.length)
}
const handleError = (Error,UploadFile,uploadFiles)=> {
  console.log("文件上传失败时的钩子" + UploadFile.name)
}


const handleProgress = (UploadFile)=> {
  console.log("文件上传时的钩子" + UploadFile.name)
}

const uploads = ref()
const clearFiles = ()=> {
  uploads.value.clearFiles()
}


</script>


<style scoped>

</style>